<template>
	<view class="u-p-20">
		<view class="u-p-20">
			<u-field v-model="params.money" label="充值金额:" placeholder="请输入充值金额"></u-field>
		</view>
		<view class="u-p-20">
			<view class="u-text-center">-充值方式-</view>

			<view @click="openEpayDialog" class="u-flex u-row-between u-p-20 u-m-t-20" style="border-bottom: 1rpx solid #F6F6F6FF;">
				<view>
					<view class="u-flex">
						<u-image src="http://xcx.itcwc.com/wxImg/5dcf4786109a5.png" mode="aspectFill" width="70rpx" height='70rpx'></u-image>
						<view class="u-m-l-30 u-font-28">易支付</view>
					</view>
				</view>
				<view class="u-flex">
					<view>
						<u-image :src="pays == 'epay' ? 'https://www.sqkjkj.vip/wxImg/common/shop/c1.png' : 'https://www.sqkjkj.vip/wxImg/common/shop/c.png'" mode="aspectFill" width="40rpx" height='40rpx'></u-image>
					</view>
				</view>
			</view>

			<view v-if="showWechatPay && is_wechat_switch == '1'" @click="pays = 'wechat'" class="u-flex u-row-between u-p-20 u-m-t-20" style="border-bottom: 1rpx solid #F6F6F6FF;">
				<view>
					<view class="u-flex">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="70rpx" height='70rpx'></u-image>
						<view class="u-m-l-20 u-font-28">微信支付</view>
					</view>
				</view>
				<view class="u-flex">
					<view>
						<u-image :src="pays == 'wechat' ? 'https://www.sqkjkj.vip/wxImg/common/shop/c1.png' : 'https://www.sqkjkj.vip/wxImg/common/shop/c.png'" mode="aspectFill" width="40rpx" height='40rpx'></u-image>
					</view>
				</view>
			</view>

			<!-- #ifdef APP-PLUS -->
			<view v-if="is_alipay_switch == '1'" @click="pays = 'alipay'" class="u-flex u-row-between u-p-20" style="border-bottom: 1rpx solid #F6F6F6FF;">
				<view>
					<view class="u-flex">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="70rpx" height='70rpx'></u-image>
						<view class="u-m-l-20 u-font-28">支付宝支付</view>
					</view>
				</view>
				<view class="u-flex">
					<view>
						<u-image :src="pays == 'alipay' ? 'https://www.sqkjkj.vip/wxImg/common/shop/c1.png' : 'https://www.sqkjkj.vip/wxImg/common/shop/c.png'" mode="aspectFill" width="40rpx" height='40rpx'></u-image>
					</view>
				</view>
			</view>
			<!-- #endif -->
		</view>

		<view @click="save" class="u-w-600 u-h-100 u-l-h-100 u-text-center u-fix u-b-50 u-m-l-50 u-b-r-13 cl_FFF" style="background: linear-gradient(-64deg, #FF382C, #FF633F);">提交</view>

		<u-popup v-model="shows" mode='center'>
			<view class="u-p-30 u-h-200" v-if="shows">
				<u-message-input :focus="true" :maxlength='6' @finish="finish"></u-message-input>
			</view>
		</u-popup>

		<u-popup v-model="showEpayDialog" mode="center" width="80%" border-radius="10">
			<view class="epay-dialog">
				<view class="epay-dialog-title">请选择支付方式</view>
				<view class="epay-dialog-content">
					<view class="epay-payment-option" @click="selectEpayMethod('wxpay')">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': params.epay_type === 'wxpay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="40rpx" height='40rpx'></u-image>
						</view>
						<view class="payment-name">微信支付</view>
					</view>
					<view v-if="!isWechatMP" class="epay-payment-option" @click="selectEpayMethod('alipay')">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': params.epay_type === 'alipay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="40rpx" height='40rpx'></u-image>
						</view>
						<view class="payment-name">支付宝支付</view>
					</view>
				</view>
				<view class="epay-dialog-footer">
					<view class="epay-dialog-btn cancel-btn" @click="showEpayDialog = false">取消</view>
					<view class="epay-dialog-btn confirm-btn" @click="confirmEpayMethod">确定</view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			params: {
				money: '',
				type: '',
				method: '',
				epay_type: 'wxpay',
			},
			params2: {},
			pays: '',
			showWechatPay: true,
			shows: false,
			showEpayDialog: false,
			userinfo: {},
			isWechatMP: false,
			is_wechat_switch: '1',
			is_alipay_switch: '1',
		}
	},
	onLoad(options) {
		this.is_wechat_switch = options.is_wechat_switch;
		this.is_alipay_switch = options.is_alipay_switch;
		this.wechatPaySwitch()
		this.detectDeviceType()
		this.userinfo = uni.getStorageSync("userinfo") || {}
	},
	methods: {
		detectDeviceType() {
			// #ifdef H5
			this.params.method = 'web'
			this.isWechatMP = false
			// #endif

			// #ifdef MP-WEIXIN
			this.params.method = 'jsapi'
			this.isWechatMP = true
			// #endif

			// #ifdef MP-ALIPAY
			this.params.method = 'jsapi'
			this.isWechatMP = false
			// #endif

			// #ifdef APP-PLUS
			this.params.method = 'web'
			this.isWechatMP = false
			// #endif
		},
		wechatPaySwitch() {
			this.$api.wechatPaySwitch({}, (res) => {
				// #ifdef MP-WEIXIN
				if (res.data.data.mini != 1) {
					this.pays = 'deposit'
					this.showWechatPay = false
				}
				//  #endif
				// #ifdef APP-PLUS
				if (res.data.data.mini != 1) {
					this.pays = 'alipay'
					this.showWechatPay = false
				}
				// #endif
				// #ifdef H5
				if (res.data.data.mini != 1) {
					this.pays = 'deposit'
				}
				// #endif
			})
		},
		finish(e) {
			this.yuePay(e)
		},
		yuePay(e = '') {
			if (this.pays == 'epay') {
				if (this.isWechatMP) {
					this.params2.type = 'wxpay'
				}
				this.$com.easyPay(this.params2, 'epay');
			} else {
				uni.showLoading({
					title: '支付中',
					mask: true
				});
				this.$api.go_pay({
					target_id: this.pays_list.target_id,
					target_type: this.pays_list.target_type,
					pay_type: this.pays,
					client: 'APP',
					trade_pwd: e
				}, res => {
					uni.hideLoading();
					if (res.data.code == 0) {
						this.$refs.uToast.show({
							title: '提交成功',
							type: 'success',
							callback: cal => {}
						})
						this.shows = false
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				})
			}
		},
		selectEpayMethod(method) {
			if (this.isWechatMP && method === 'alipay') {
				return
			}
			this.params.epay_type = method
		},
		confirmEpayMethod() {
			// uni.navigateTo({
			// 	url: '/pages/webview/webview?url=' + encodeURIComponent(`http://baidu.com`)
			// });

			
			// setTimeout(() => {
			// 	uni.navigateBack();
			// 	uni.navigateTo({
			// 		url: '/subcontract/payStatus/payStatus?goodsName=aqin&payType=1&payMoney=100'
			// 	});
			// }, 2000)
		
			this.showEpayDialog = false
		},
		openEpayDialog() {
			this.pays = 'epay'
			if (this.isWechatMP) {
				this.params.epay_type = 'wxpay'
			}
			this.showEpayDialog = true
		},
		save() {
			if (!this.params.money || this.params.money == '') {
				this.$refs.uToast.show({
					title: '请输入充值金额',
					type: 'error',
					callback: cal => {}
				})
				return
			}
			if (this.pays == 'wechat' || this.pays == 'alipay' || this.pays == 'epay') {
				this.params.type = this.pays
				this.$api.recharge_set(this.params, res => {
					if (res.data.code == 1) {
						let params = {
							target_id: res.data.data.target_id,
							target_type: res.data.data.target_type,
							pay_type: this.pays,
							// #ifdef APP-PLUS
							client: 'APP',
							// #endif
							// #ifdef MP-WEIXIN || MP-ALIPAY
							client: 'JSAPI',
							// #endif
							// #ifdef H5
							client: 'WAP',
							// #endif
							trade_pwd: '',
							type: this.params.epay_type,
							method: this.params.method,
						}
						if (this.pays == 'deposit') {
							this.yuePay()
							return
						} else if (this.pays == 'epay') {
							this.params2 = params
							this.yuePay()
						} else {
							// #ifdef APP-PLUS
							this.$com.wxPay(params, this.pays).then(ok => {
								this.$refs.uToast.show({
									title: ok.data.msg,
									type: 'success',
									callback: cal => {
										this.$u.route({
											type: 'reLaunch',
											url: '/pages/my/my'
										})
									}
								})
							})
							// #endif
							// #ifdef MP-WEIXIN
							this.$com.weChatPay(params, this.pays).then(ok => {
								this.$refs.uToast.show({
									title: ok.msg,
									type: 'success',
									callback: cal => {
										this.$u.route({
											type: 'reLaunch',
											url: '/pages/my/my'
										})
									}
								})
							})
							// #endif
						}
					}
				})
			}
		}
	}
}
</script>

<style>
.epay-dialog {
	background-color: #fff;
	padding: 30rpx;
}
.epay-dialog-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}
.epay-dialog-content {
	padding: 20rpx 0;
}
.epay-payment-option {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}
.radio-button {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 2rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}
.radio-inner {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: transparent;
}
.radio-selected {
	background-color: #3298FD;
}
.payment-icon {
	margin-right: 20rpx;
}
.payment-name {
	font-size: 28rpx;
}
.epay-dialog-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
}
.epay-dialog-btn {
	width: 45%;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}
.cancel-btn {
	background-color: #f5f5f5;
	color: #666;
}
.confirm-btn {
	background-color: #3298FD;
	color: #fff;
}
</style>
